<template>
  <div id="list">
    <div class="rec">每日推荐</div>
    <div class="list_content">
      <ul class="song_list">
        <li @click="play(hash[index], name[index])" v-for="(item, index) in name" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'List',
    data () {
      return {
        name: [],
        hash: []
      }
    },
    methods: {
      play: function (arg, arg2) {
        this.$store.commit('change', arg)
        this.$store.commit('add', arg)
        this.$store.commit('addName', arg2)
        this.$root.eventHub.$emit('click', event.target)
      }
    },
    created: function () {
      let that = this
      this.$ajax.get('/api/?json=true').then((res) => {
        let data = res.data.data
        if (res.status !== 200) {
          console.error('获取热门音乐失败')
        } else {
          let arrName = []
          let arrHash = []
          for (var i = 0, len = data.length; i < len; i++) {
            arrName.push(data[i].filename)
            arrHash.push(data[i].hash)
          }
          that.name = arrName
          that.hash = arrHash
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/scss/mixin";
  #list {
    width: 100%;
    .rec {
      width: 30%;
      height: pxTorem(30);
      background-color: darkseagreen;
      border-radius: 30px;
      text-align: center;
      line-height: pxTorem(30);
      margin: pxTorem(15) auto pxTorem(15) auto;
    }
    .list_content {
      width: 100%;
      display: flex;
      border-top: 1px solid #eee;
      .song_list {
        padding: 0 pxTorem(10) 0 pxTorem(10);
        width: 100%;
        overflow: hidden;
        li {
          border-bottom: 1px solid #ccc;
          height: pxTorem(45);
          line-height: pxTorem(45);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>
